<template>
    <div class="panel">
        <div class="panel__header">
            <h1 class="title">
                {{ props.title }}
            </h1>
            <div class="desc" v-html="props.desc">
            </div>
        </div>
        <div class="panel__body">
            <div class="panel__example">
                <slot name="example"></slot>
            </div>
            <div class="panel__code">
                <div class="btns">
                    <el-tooltip content="编辑案例源码" placement="bottom" effect="light">
                        <el-icon :size="14" class="btn-img" color="#909399" @click="goEdit">
                            <Edit />
                        </el-icon>
                    </el-tooltip>
                    <el-tooltip content="查看源码" placement="bottom" effect="light">
                        <el-image @click="show = !show" class="btn-img" :src="CodePng"></el-image>
                    </el-tooltip>
                </div>
                <div class="code" v-if="show">
                    <CodeView :file="props.file"></CodeView>
                </div>
                <div v-show="show" class="code-buttom" @click="show = false">
                    <el-icon :size="20" color="#909399">
                        <el-icon>
                            <CaretTop />
                        </el-icon>
                    </el-icon>
                    <el-text>隐藏案例源码</el-text>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import CodePng from '../../assets/code.png'
import CodeView from './CodeView.vue';
type PropsType = {
    file: string,
    title: string,
    desc: string
}
const props = defineProps<PropsType>()
const show = ref(false)

const router = useRouter()
const goEdit = () => {
    if (import.meta.env.DEV) {
        router.push({
            path: '/uicomp/code',
            query: {
                file: props.file
            }
        })
    }else{
        
    }
}
</script>

<style lang="scss" scoped>
.panel {
    text-align: left;
    padding-right: 20px;
}

.title {
    color: #606266;
}

.btn-img {
    height: 20px;
    width: 20px;
    cursor: pointer;
    box-sizing: content-box;
    padding: 0 5px;
}

.desc {
    color: rgb(48, 49, 51);
    padding: 10px 0;
}

.panel__body {
    border: 1px solid #dcdfe6;
    border-radius: 4px;

    .panel__example {
        padding: 20px;
    }

    .panel__code {
        border-top: 1px solid #dcdfe6;

        .btns {
            box-sizing: border-box;
            padding: 10px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            height: 40px;
        }

        .code {
            background-color: #f6f8fa;
        }

        .code-buttom {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            padding: 5px 0;
            cursor: pointer;
        }
    }
}</style>